<template>
  <div id="category">
    <NavBar class="home-nav">
      <div slot="center">分类</div>
    </NavBar>
    <SearchInput />
    <div class="cat-container">
      <!--1.无论是否设置click:false, button都可以点击:class="{ active: index === currentIndex }-->

      <Scroll class="left_menu" ref="scroll1">
        <ul>
          <li
            v-for="(item, index) in LeftmenuList"
            :key="item.cat_id"
            class="left_item"
            @click="changeRight(index)"
            :class="{ active: currentIndex == index }"
          >
            {{ item.cat_name }}
          </li>
        </ul>
      </Scroll>
      <Scroll class="right_content" ref="scroll2">
        <div
          class="goods_group"
          v-for="(item1, index) in rightContent"
          :key="index"
        >
          <p class="title">{{ item1.cat_name }}</p>
          <div class="goods_list">
            <router-link
              v-for="item2 in item1.children"
              :key="item2.cat_id"
              :to="`/goods_list?cid=${item2.cat_id}`"
            >
              <img :src="item2.cat_icon" />
              <p class="goods_name">{{ item2.cat_name }}</p>
            </router-link>
          </div>
        </div>
      </Scroll>
    </div>
  </div>
</template>

<script>
import { getCategorydata } from "@/api/index";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Category",
  data() {
    return {
      categoryList: [],
      rightContent: [],
      currentIndex: 0,
    };
  },
  computed: {
    LeftmenuList() {
      return this.categoryList.filter((v) => v.cat_name);
    },
    // rightContent: {
    //   get() {
    //     return this.categoryList[0].children;
    //   },
    //   //isAll被修改时set被调用
    //   set(value) {
    //     this.changeRight(value);

    //     // this.checkAllTodo(value)
    //   },

    allContent() {
      return this.categoryList.map((v) => {
        return v.children;
      });
    },
    // let LeftmenuList = this.Cates;
  },
  // 组件创建完后调用
  mounted() {
    this.getCategory();
  },
  methods: {
    changeRight(index) {
      this.currentIndex = index;
      this.rightContent = this.categoryList[index].children;
    },
    async getCategory() {
      try {
        let res = await getCategorydata();
        console.log(res);
        this.categoryList = res.message;
        this.rightContent = this.categoryList[0].children;
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<style lang="less" scoped>
#category {
  position: relative;
  height: 100vh;
}
.cat-container {
  position: absolute;
  top: 88px;
  bottom: 49px;
  left: 0;
  right: 0;
  display: flex;
  .left_menu {
    overflow: hidden;

    border-right: 1px solid var(--color-tint);
    flex: 2;
  }
  .right_content {
    overflow: hidden;
    flex: 5;
  }
  .left_item {
    height: 80px;
    text-align: center;
    line-height: 80px;

    font-size: 30rpx;
  }
  .title {
    line-height: 80px;
    height: 80px;
    font-size: 30rpx;
    font-weight: bold;
    color: var(--color-tint);
    text-align: center;
  }
  .goods_list {
    display: flex;
    flex-wrap: wrap;
    a {
      width: 33.33%;
      text-align: center;
      img {
        width: 50%;
        height: 50%;
      }
      .goods_name {
        line-height: 50px;
        height: 50px;
      }
    }
  }
}
/*overflow-y: scroll;*/
</style>
